import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Tabs,Form,Row,Col,Button,Input } from 'antd'
import { routerRedux } from 'dva/router'
import List from './List'
import ResultList from './ResultList'
import Modal from './CaseModal'
import ExecuteForm from './ExecuteModal'
import style from './List.less'
// import Button from "antd/es/button/button.d";

const TabPane = Tabs.TabPane
const FormItem = Form.Item
const EnumPostStatus = {
  CHPLAN: 1,   //选择计划
  CHCASE: 2,   //选择用例
  DOPLAN: 3,   //执行计划
}


const Index = ({ execute, dispatch, loading, location }) => {
  const { list, pagination ,productId,suiteName,planData,sutList,testHostList,releaseList,resultText,level,targetKeylist} = execute
  const { query = {}, pathname } = location
  let productList  = list.productList
  let suiteList  = list.suiteList
  let initProductId
  for(let k in productList){
    if(k==0){
      initProductId=productList[k].pk
    }

  }
  // let pid=productId?productId:initProductId




  const caselistProps = {
    // pagination,
    level:level,
    targetKeylist:targetKeylist,
    productList:productList,
    suiteList:suiteList,
    productId:productId?productId:initProductId,
    suiteName:suiteName?suiteName:[],
    // children:children,
    // suitechildren:suitechildren,
    loading: loading.effects['execute/query'],

    suiteChangeFn(data){
      dispatch({
        type: 'execute/changeSuite',
        payload: data,
      })
    },
    goto(){
    	dispatch(routerRedux.push({
        pathname,
        query: {
          status: 3,
        },
      }))
    },
    changeTarget(targetKeys){
      dispatch({
        type: 'execute/changeTarget',
        payload: {
          targetKeylist:targetKeys,
        },
      })
    }
  }
  const planlistProps = {
    pagination,
    dataSource: list.data,
    productList:productList,
    suiteList:list.suiteList,
    loading: loading.effects['execute/query'],
    onChange (page) {
      dispatch(routerRedux.push({
        pathname,
        query: {
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        },
      }))
    },
    goto(){
      dispatch(routerRedux.push({
        pathname,
        query: {
          status: 3,
        },
      }))
    }
  }


  const handleTabClick = (key) => {
    dispatch(routerRedux.push({
      pathname,
      query: {
        status: key,
      },
    }))
  }


  const resultlistProps={
    dataSource: planData,
    savePlan(data){
      dispatch({
        type: 'execute/save',
        payload: data,
      })
    }
  }
  const executeformProps={
    sutList:sutList,
    testHostList:testHostList,
    releaseList:releaseList,
    executePlan(data){
      dispatch({
        type: 'execute/executePlan',
        payload: data,
      })
    }
  }
  const clearText=()=>{
    dispatch({
      type: 'execute/clearResult',
    })
  }


  return (<div className="content-inner">
    <Tabs activeKey={
      query.status === String(EnumPostStatus.DOPLAN) ? String(EnumPostStatus.DOPLAN) : (query.status === String(EnumPostStatus.CHCASE)?String(EnumPostStatus.CHCASE):String(EnumPostStatus.CHPLAN))
    } onTabClick={handleTabClick}>
      <TabPane tab="选择计划方式" key={String(EnumPostStatus.CHPLAN)}>
        <List {...planlistProps} />
      </TabPane>
      <TabPane tab="选择用例方式" key={String(EnumPostStatus.CHCASE)}>
        <div></div>
        {productList && suiteList && <Modal {...caselistProps}/>}

      </TabPane>
      <TabPane tab="测试环境配置" key={String(EnumPostStatus.DOPLAN)} disabled>
        <Row>
          {/*<Col span={16}>*/}
            <div className={style.resultShow}>
              <ResultList {...resultlistProps}/>
              <ExecuteForm {...executeformProps}/>
            </div>
          {/*</Col>*/}
          {/*<Col span={8}>*/}
            {/*<div className={style.resultContent}>*/}
              {/*<h3>执行结果</h3>*/}
              {/*<div className={style.result}>*/}
                {/*{resultText}*/}
              {/*</div>*/}
              {/*<Button onClick={clearText}>清除内容</Button>*/}
            {/*</div>*/}
          {/*</Col>*/}
        </Row>
      </TabPane>
    </Tabs>
  </div>)
}

Index.propTypes = {
  execute: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}

export default connect(({ execute, loading }) => ({ execute, loading }))(Index)
